import React from 'react'
import View from 'lib/View.jsx'
import Layout from '../common/layout.jsx'
import Tab from 'lib/components/tab.jsx'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import Topbar from 'lib/components/TopbarWidget.jsx'
import MainScope from './MainScope.es6'
import tips from '../common/indicator-tips.jsx'
import dispatcher from 'lib/dispatcher'
import cx from 'classnames'

export default class MainView extends View{
  switchTab(ind,key){
    dispatcher.dispatch({
      $type:'switch_tab',
      key:key,
      index:ind
    })
  }
  setPreSize(key){
    dispatcher.dispatch({
      $type:'PRE_SIZE',
      key:key
    })
  }
  render(){
    return (
      <Layout title="日活" subtitle="日活跃设备数统计" hideTime={true} hideVersion={true}>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box" style={{position: 'relative'}}>
              <Card title={
                  <span>
                    活跃设备数对比
                    <i className="iconfont" data-tip={tips.dayactive_device}>&#xe663;</i>
                  </span>
                } extra={
                <div style={{lineHeight: '30px'}}>
                  <div className="switch-group" style={{marginTop: '2px'}}>
                    <a href="javascript:;" key="w" className={cx({
                        active:this.state.dayState === 'day'
                      })} onClick={this.setPreSize.bind(this,'day')}>日</a>
                    <a href="javascript:;" key="m" className={cx({
                        active:this.state.dayState === 'week'
                      })} onClick={this.setPreSize.bind(this,'week')}>周</a>
                    <a href="javascript:;" key="p" className={cx({
                        active:this.state.dayState === 'month'
                      })} onClick={this.setPreSize.bind(this,'month')}>月</a>
                  </div>
                <span>{'今日活跃设备数：'+(this.state.totalNum)}</span>
                </div>
                }>
                <ChartWidget
                  key={this.state.dayState}
                  store={this.state.chart_range}
                  chartType="column"
                  chartSettings={{legend:{enabled:false}}}
                />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Tab onAfterChange={this.switchTab} tabActive={this.state.currentTab}>
                <Tab.Panel title="分时对比" key="day_compare">
                  <Card title={
                      <span>
                        分时段活跃设备数对比
                        <i className="iconfont" data-tip={tips.dayactive_time}>&#xe663;</i>
                      </span>
                    }>
                    <ChartWidget
                      store={this.state.chart_day_compare}
                    />
                  </Card>
                </Tab.Panel>
                <Tab.Panel title="地域分布" key="pre_geo">
                  <Card title={
                      <span>
                        按地区划分活跃设备数
                        <i className="iconfont" data-tip={tips.dayactive_geo}>&#xe663;</i>
                      </span>
                    }>
                    <ChartWidget
                      store={this.state.chart_pre_geo}
                    />
                  </Card>
                </Tab.Panel>
                <Tab.Panel title="应用版本" key="pre_version">
                  <Card title={
                      <span>
                        APP版本划分的活跃设备数
                        <i className="iconfont" data-tip={tips.dayactive_appversion}>&#xe663;</i>
                      </span>
                    }>
                    <ChartWidget
                      store={this.state.chart_pre_version}
                    />
                  </Card>
                </Tab.Panel>
                <Tab.Panel title="操作系统分布" key="pre_os">
                  <Card title={
                      <span>
                        操作系统划分的活跃设备数
                        <i className="iconfont" data-tip={tips.dayactive_os}>&#xe663;</i>
                      </span>
                    }>
                    <ChartWidget
                      store={this.state.chart_pre_os}
                    />
                  </Card>
                </Tab.Panel>
              </Tab>
            </div>

          </div>
        </div>
      </Layout>
    )
  }
}
MainView.defaultProps = {
  Scope:MainScope
}
